<template>
    <div class="toolBar">
        <div class="searchBox">
            <el-input
                class="searchInput"
                prefix-icon="el-icon-search"
                clearable
                v-model="searchVal"
                placeholder="搜索IP...">
            </el-input>
            <span style="font-size:15px">操作系统:</span><el-select 
                class="selectOSType"
                v-model="selectOSType" 
                clearable 
                placeholder="操作系统">
                <el-option
                    v-for="item in selectDataOSType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
            <span style="font-size:15px">监控状态:</span><el-select 
                class="selectIsEnabled"
                v-model="selectIsEnabled" 
                clearable 
                placeholder="监控状态">
                <el-option
                    v-for="item in selectDataIsEnabled"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="changeLie">
            <el-tooltip content="筛选列" placement="top" effect="dark">
                <el-popover
                    placement="left-start"
                    width="100"
                    trigger="click">
                    <el-checkbox-group 
                        id="myCheckboxGroup"
                        v-model="checkedArr" 
                        @change="handleChange">
                        <el-checkbox v-for="item in tableColumns"
                            :class="checkboxStyleFn(item)"
                            :label="item.label"
                            :key="item.prop" 
                            style="display:block;">
                            {{item.label}}
                        </el-checkbox>
                    </el-checkbox-group>
                    <el-button
                        round
                        icon="el-icon-jk-lie"
                        slot="reference">
                    </el-button>
                </el-popover>
            </el-tooltip>
        </div>
    </div>
</template>

<script>
import bus from 'common/bus.js';

export default {
    name: 'toolBar',
    props: ['tableColumns'],
    data() {
        return {
            selectIsEnabled: '',
            selectDataIsEnabled: [
                {
                    value: 'Y',
                    label: '监控中'
                },{
                    value: 'N',
                    label: '待开启'
                },
                {
                    value: '',
                    label: '全部'
                }
            ],
            selectOSType: '',
            selectDataOSType: [
                {
                    value: 'Linux',
                    label: 'Linux'
                },{
                    value: 'Windows',
                    label: 'Windows'
                },
                {
                    value: 'AIX',
                    label: 'AIX'
                },
                {
                    value: '',
                    label: '全部'
                }
            ],
            searchVal: '',
            changeLie: '',
            checkedArr: [],
        };
    },
    created() {

        this.initCheckedArr();
    },
    computed: {
        
    },
    methods: {
        clearSearchVal() {
            this.searchVal = '';
        },
        handleChange(val) {
            this.changeLie = val;
            this.$emit('changeLie', val);
        },
        initCheckedArr() {
            this.tableColumns.forEach((element, index) => {
                if (element.isShow) {
                    this.checkedArr.push(element.label);
                }
            });
        },
        checkboxStyleFn(item) {
            if (item.isShow) {
                return 'testClass1';
            } else {
                return 'testClass2';
            }
        },
    },
    watch: {
        'searchVal': function (newVal, oldVal) {
            this.$emit('getSearchIP', this.searchVal);
        },
        'selectIsEnabled': function (newVal, oldVal){
            this.$emit('selectIsEnabled', this.selectIsEnabled);
        },
        'selectOSType': function (newVal, oldVal){
            this.$emit('selectOSType', this.selectOSType);
        }
    }
}
</script>

<style scoped>
    .toolBar {
        overflow: hidden;
        margin-bottom: 14px;
    }
    .searchBox {
        float: left;
        margin-right: 10px;
    }
    .searchBox .searchInput {
        display: inline-block;
        width: 240px;
        margin-right: 10px;
    }
    .searchBox .selectDBType {
        display: inline-block;
        width: 150px;
        margin-right: 10px;
    }
    .searchBox .selectOSType {
        display: inline-block;
        width: 150px;
        margin-right: 10px;
    }
    .searchBox .selectIsEnabled {
        display: inline-block;
        width: 150px;
        margin-right: 10px;
    }
    .changeLie {
        float: right;
    }
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked + .el-checkbox__label {
        
        color: #606266;
    }
    #myCheckboxGroup /deep/ .el-checkbox__input.is-checked .el-checkbox__inner{
        background-color: #5fb878;
        border-color: #5fb878;
    }
    #myCheckboxGroup /deep/ .el-checkbox{
        margin-bottom: 8px;
    }
</style>